<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../mui/css/mui.min.css" rel="stylesheet" />
		<style type="text/css">
			html {
				font-size: 20px;
				box-sizing: border-box;
			}
			
			body {
				line-height: 1;
				margin: 0;
				background-color: #EFEFF4;
			}
			
			li, a {
				list-style: none;
				text-decoration: none;
				color: #333;
				font-size: 0.75rem;
			}
			
			
			.content-wrap {
				margin: 0.6rem 0;
				background-color: #fff;
			}
			
			.header {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0.6rem 1.05rem;
			}
			
			.mui-navigate-right:after, .mui-push-right:after {
				right: 21px;
			}
			
			.num {
				padding-right: 0.85rem;
			}
			
			h5 {
				font-size: 0.9rem;
				color: #e11470;
    			font-weight: normal;
				margin-top: 0;
				margin-bottom: 0;
			}
			
			.hotel-recommend {
				display: inline-block;
    			font-size: 0;
				padding: 0 1.05rem;
				margin: 0;
			}
			
			.hotel-recommend li {
				display: inline-block;
    			/*padding-right: 0.6rem;*/
    			padding-bottom: 0.6rem;
			}
			
			.hotel-recommend li:nth-child(1n) {
				float: left;
			}
			
			.hotel-recommend li:nth-child(2n) {
				float: right;
				padding-right: 0;
			}
			
			.hotel-img img {
				width: 8.025rem;
    			height: 6rem;
    			border-radius: 5px;
			}
			
			@media screen and (min-width:320px) and (max-width:360px) {
				.hotel-img img {
					width: 132.5px;
					height: 100px;
				}
			}
			
			.content span {
				display: block;
			}
			
			.title {
				font-size: 0.7rem;
				color: #333;
				padding-top: 0.45rem;
			}
			
			.distance {
				font-size: 0.6rem;
				color: #999;
				padding-top: 0.3rem;
			}
		</style>
	</head>

	<body>
		<div class="content-wrap">
			<div class="header">
				<h5 style="">酒店推荐</h5>
				<a class="mui-navigate-right" href="./hotel-recommend.html">
					<span class="num">50家</span>
				</a>
			</div>
			<ul class="hotel-recommend">
				<li>
					<a>
						<div class="hotel-img">
							<img src="../styles/images/avatar-icon3.png"/>
						</div>
						<div class="content">
							<span class="title">天鹅恋情侣主题酒店</span>
							<span class="distance">距您5.2公里</span>
						</div>
					</a>
				</li>
				<li>
					<a>
						<div class="hotel-img">
							<img src="../styles/images/avatar-icon3.png"/>
						</div>
						<div class="content">
							<span class="title">天鹅恋情侣主题酒店</span>
							<span class="distance">距您5.2公里</span>
						</div>
					</a>
				</li>
				<li>
					<a>
						<div class="hotel-img">
							<img src="../styles/images/avatar-icon3.png"/>
						</div>
						<div class="content">
							<span class="title">天鹅恋情侣主题酒店</span>
							<span class="distance">距您5.2公里</span>
						</div>
					</a>
				</li>
				<li>
					<a>
						<div class="hotel-img">
							<img src="../styles/images/avatar-icon3.png"/>
						</div>
						<div class="content">
							<span class="title">天鹅恋情侣主题酒店</span>
							<span class="distance">距您5.2公里</span>
						</div>
					</a>
				</li>
			</ul>
		</div>
		<script src="../mui/js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
	</body>

</html>

<!-- 清除浮动的案例-- 开始 -->
	<!--<style type="text/css"> 
	   .div1{background:#000080;border:1px solid red;}
	   .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
	   
	   .left{float:left;width:20%;height:200px;background:#DDD}
	   .right{float:right;width:30%;height:80px;background:#DDD}
	   
	   /*清除浮动代码*/
	   .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
	   .clearfloat{zoom:1}
	</style> 
	
	<div class="div1 clearfloat"> 
		<div class="left">Left</div> 
		<div class="right">Right</div> 
	</div>
	<div class="div2">div2</div>-->
<!-- 清除浮动的案例-- 结束 -->
